import PropTypes from 'prop-types'
import React, { memo, useCallback, useState } from 'react'
import { SectionV2Wrapper } from './style'
import SectionHeader from '@/components/section-header'
import RoomItem from '@/components/room-item'
import SectionTabs from '@/components/section-tabs'
import SectionFooter from '@/components/section-footer'

const HomeSectionV2 = memo(props => {
  const { infoData: discountInfo } = props
  /* 数据转换 */
  const tabNames = discountInfo.dest_address?.map(item => item.name)
  /* tabs切换数据的改变 */
  const initalName = Object.keys(discountInfo.dest_list)[0]
  const [name, setName] = useState(initalName)
  const tabClickHandle = useCallback((index, name) => {
    console.log(name)
    setName(name)
  }, [])
  return (
    <SectionV2Wrapper>
      <SectionHeader title={discountInfo.title} subtitle={discountInfo.subtitle}></SectionHeader>
      <SectionTabs tabNames={tabNames} tabClick={tabClickHandle}></SectionTabs>
      {discountInfo && (
        <ul className='room-list'>
          {discountInfo?.dest_list?.[name].map(item => (
            <RoomItem itemData={item} key={item.id} itemWidth='33.333%' />
          ))}
        </ul>
      )}
      <SectionFooter name={name}></SectionFooter>
    </SectionV2Wrapper>
  )
})

HomeSectionV2.propTypes = {
  infoData: PropTypes.object
}

export default HomeSectionV2
